import { Carousel } from 'antd';
import { replaceImageUrl, replaceContent } from '@/utils';
// css
import styles from '@/styles/CommonDetail.module.scss';

export default function HotelRoomDetail ({ detail }){
    return (
        <section className={styles['room-popup']}>
            <h3>{detail.goodsExtendName}</h3>
            <div className={styles['room-popup-short']}>
                <div className={styles['room-imgs']}>
                    {
                        detail.imgs ?
                            <Carousel>
                                {
                                    detail.imgs.map((item, index) => <div key={index}><img src={replaceImageUrl(item)} alt="" /></div>)
                                }
                            </Carousel> : ""
                    }
                </div>
                <div className={styles['room-item']}><span>面积</span><span>{detail.roomArea}m²</span></div>
                <div className={styles['room-item']}><span>加床</span><span>{detail.bed}</span></div>
                <div className={styles['room-item']}><span>有窗</span><span>{detail.window}</span></div>
                <div className={styles['room-item']}><span>早餐</span><span>{detail.food}</span></div>
                <div className={styles['room-item']}><span>吸烟</span><span>{detail.smoke}</span></div>
                <div className={styles['room-item']}>
                    <span>床型</span>
                    {
                        detail.beds ? detail.beds.map((item, index) => <span key={index}>{item}</span>) : ''
                    }
                </div>
            </div>
            <div className={styles['room-popup-detail']}>
                <div className={styles['room-detail-item']}>
                    <span>房型设施</span>
                    <p dangerouslySetInnerHTML={{ __html: detail.facilities && detail.facilities.replace(/,/g, '、') }}></p>
                </div>
                <div className={styles['room-detail-item']}>
                    <span>房型政策</span>
                    <p dangerouslySetInnerHTML={{ __html: replaceContent(detail.refundExplanation) }}></p>
                </div>
                <div className={styles['room-detail-item']}>
                    <span>在线付</span>
                    <p>房费需提前支付，可使用微信进行付款</p>
                </div>
            </div>
        </section>
    )
}